(function(){
    function Dashboard(){
        var breadcrumb = new App.models.Breadcrumb({
            prefix: [],
            curr: ' 仪表盘'
        });

        var chartView = Backbone.View.extend({});
        var chartModel = Backbone.Model.extend({});

        var MainView = Backbone.View.extend({
            // el与initialize一样是bk的关键字, 不能重命名为其它
            el: '#page-cnt',
            template:  _.template($("#tpl-dashboard").html()),
            events: {
                'click #minions-accepted .key-delete': 'keysOperation',
                'click #minions-pre .key-accept': 'keysOperation',
                'click #minions-pre .key-reject': 'keysOperation',
                'click #minions-pre .key-deny': 'keysOperation',
                'click #minions-rejected .key-delete': 'keysOperation',
                'click #minions-denied .key-delete': 'keysOperation',
            },
            initialize: function() {
                // 创建面包屑视图
                this.breadcrumbView = new App.views.BreadcrumbView({model: breadcrumb});
                this.render();
            },
            render: function(){
                this.$el.html(this.template());
                this.refreshKeys();
                this.refreshStatus();
            },
            refreshKeys: function(){
                var self = this;
                $.ajax({
                    type: 'GET',
                    url: App.apiList.key.query,
                    success: function(result){
                        result = result.return[0].data.return;
                        self.renderKeyChart(result);
                    }
                });
            },
            refreshStatus: function(){
                var self = this;
                $.ajax({
                    type: 'GET',
                    url: App.apiList.health,
                    success: function(result){
                        result = result.return[0];
                        self.renderStatusChart(result);
                    }
                });
            },
            renderKeyChart: function(data){
                var keyListWidget = echarts.init(document.getElementById('key-chart'));
                var option = {
                    title: {
                        text: '节点key列表'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {                           // 图例
                        orient: 'vertical',
                        x: 'right',
                        data: ['已接受','待处理','已拒绝','已禁止']
                    },
                    series: [
                        {
                            name:'访问来源',
                            type:'pie',                 // pie 饼图
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:[
                                {value: data.minions.length, name:'已接受'},
                                {value: data.minions_pre.length, name:'待处理'},
                                {value: data.minions_rejected.length, name:'已拒绝'},
                                {value: data.minions_denied.length, name:'已禁止'},
                            ]
                        }
                    ]
                };
                keyListWidget.setOption(option);
            },
            renderStatusChart: function(data){
                var online = offline = 0;
                for(i in data){
                    if(data[i]) online ++;
                    else offline ++;
                }
                var count = online + offline;
                var statusListWidget = echarts.init(document.getElementById('status-chart'));
                var option = {
                    title: {
                        text: '主机状态'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {                           // 图例
                        orient: 'vertical',
                        x: 'right',
                        data: ['在线', '离线']
                    },
                    series: [
                        {
                            name:'访问来源',
                            type:'pie',                 // pie 饼图
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:[
                                {value: online, name:'在线'},
                                {value: offline, name:'离线'},
                            ]
                        }
                    ]
                };
                statusListWidget.setOption(option);
            },
            keysOperation: function(e){
                var self = this;
                // key-delete, key-deny, 捕获操作方法字符串
                var pattern = new RegExp('\.key-(.*)$');
                var cls = $(e.target).attr('class');
                var operation = pattern.exec(cls)[1];
                console.log($(e.target).parents('tr').find('.minion-id').text());
                $.ajax({
                    type: 'GET',
                    url: App.apiList.key[operation],
                    data: {
                        match: $(e.target).parents('tr').find('.minion-id').text()
                    },
                    success: function(result){
                        self.postRequest(result);
                    }
                });
            },
            postRequest: function(result){
                console.log(result);
                var self = this;
                if(result.return[0].data.success){
                    $.gritter.add({
                        title: '操作成功',
                        class_name: 'gritter-success'
                    });
                    self.refreshKeys();
                    self.refreshStatus();
                }else{
                    $.gritter.add({
                        title: '操作失败',
                        class_name: 'gritter-error'
                    });
                }
            },
        });

        var mainView = new MainView();
        console.log('dashboard start');
    }

    App.modules.Dashboard = Dashboard;
})();